<template>
  <div class="docHeader">
    <div class="title">{{ hospitalName }}</div>
    <div class="title" style="font-size: 18px">{{ docTitle }}</div>
    <div v-if="patCur" class="baseInfo">
      <div class="item">
        <div class="label">姓名：</div>
        <div class="content">{{ patCur.patientName }}</div>
      </div>
      <div class="item">
        <div class="label">性别：</div>
        <div class="content">{{ gender }}</div>
      </div>
      <div class="item">
        <div class="label">出生日期：</div>
        <div class="content">
          {{ patCur.birthday && format(patCur.birthday, 'yyyy-MM-dd') }}
        </div>
      </div>
      <div class="item">
        <div class="label">科室：</div>
        <div class="content">{{ patCur.deptName }}</div>
      </div>
      <div class="item">
        <div class="label">床号：</div>
        <div class="content">{{ patCur.bedNumber }}</div>
      </div>
      <div class="item">
        <div class="label">住院号：</div>
        <div class="content">{{ patCur.hospitalNumber }}</div>
      </div>
      <div class="item">
        <div class="label">诊断：</div>
        <div class="content" style="width: 500px">
          <span style="white-space: normal">{{ zd }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { format, startOfDay } from 'date-fns'
import {
  computed,
  defineComponent,
  onBeforeUnmount,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { usePatCur } from '@/hooks'
import { getBusFromInstance, getStoreFromInstance } from '@/utils/instance'

export default defineComponent({
  props: {
    pageConfig: {
      type: Object,
      default: () => ({})
    },
    printing: {
      type: Boolean,
      default: false
    },
    docData: {
      type: Object,
      default: () => ({})
    },
    docTitle: {
      type: String,
      default: '病情护理记录单（二）（重症监护）'
    },
    pageShow: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      zd: ''
    })

    const store = getStoreFromInstance()
    const bus = getBusFromInstance()
    const { zdIndex, gender } = usePatCur()

    const patCur = computed(() => store.getters.patCur)

    function setZd(val) {
      if (!state.zd) {
        state.zd = zdIndex.value
      }
    }

    function handleZdChange() {
      bus.$emit('updateZd', {
        zd: state.zd,
        pageConfig: props.pageConfig
      })
    }

    watch(
      patCur,
      val => {
        setZd(val)
      },
      {
        immediate: true
      }
    )

    watch(
      () => props.docData,
      val => {
        setZd(patCur.value)
        if (val?.doc?.jsonText) {
          const jsonText = JSON.parse(val.doc.jsonText)
          if (jsonText.zd) {
            state.zd = jsonText.zd
          }
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    onMounted(() => {
      bus.$on('updateZd', ({ zd, pageConfig }) => {
        console.log(123)
        if (
          pageConfig.x !== props.pageConfig.x ||
          pageConfig.y !== props.pageConfig.y
        ) {
          state.zd = zd
        }
      })
    })

    onBeforeUnmount(() => {
      if (props.pageConfig.x && props.pageConfig.y) {
        bus.$off('updateZd')
      }
    })

    return {
      ...toRefs(state),
      patCur,
      gender,
      format,
      handleZdChange
    }
  }
})
</script>

<style scoped lang="scss">
.docHeader {
  padding-top: 24px;
}

.title {
  font-size: 26px;
  font-weight: bold;
  color: #000;
  text-align: center;
  // line-height: 20px;
  margin-bottom: 10px;
}

.baseInfo {
  display: flex;
  align-items: center;
  padding-left: 30px;

  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #000;
    margin-left: 50px;

    &:first-child {
      margin-left: 0;
    }

    .label {
      flex-shrink: 0;
    }

    .content {
      flex-shrink: 0;
      // line-height: 26px;
    }
  }

  :deep {
    .el-input__inner {
      border-color: #aaa;
      color: #000;
      font-size: 14px;
    }

    .el-textarea__inner {
      color: #000;
      font-size: 13px;
    }
  }
}
</style>
